<template>
  <view class="dynamic-menu">
    <view 
      v-for="menu in accessibleMenus" 
      :key="menu.id"
      class="menu-item"
      @click="handleMenuClick(menu)"
    >
      <view class="menu-icon" :style="{ background: menu.color }">
        <u-icon :name="menu.icon" color="#fff" size="24"></u-icon>
      </view>
      <view class="menu-info">
        <text class="menu-title">{{ menu.title }}</text>
        <text class="menu-desc">{{ menu.description }}</text>
      </view>
      <u-icon name="arrow-right" color="#999" size="16"></u-icon>
    </view>
  </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useAuthStore, useUserStore } from '@/store'

// 定义菜单配置
const menuConfig = {
  // 物业服务菜单
  property: {
    id: 'property',
    title: '物业服务',
    description: '物业费查询、报修服务',
    icon: 'home',
    color: '#2d8cf0',
    url: '/pages/property/property',
    requiredPermission: 'property:menu',
    requiredRole: ['PROPERTY_ADMIN', 'PROPERTY_STAFF', 'SUPER_ADMIN'],
    requirePropertyCompany: true
  },
  
  // 停车管理菜单
  parking: {
    id: 'parking',
    title: '停车管理',
    description: '车位查询、停车记录',
    icon: 'car',
    color: '#ff9500',
    url: '/pages/parking/parking',
    requiredPermission: 'parking:menu',
    requiredRole: ['PARKING_ADMIN', 'SUPER_ADMIN']
  },
  
  // 安防管理菜单
  security: {
    id: 'security',
    title: '安防管理',
    description: '门禁管理、访客登记',
    icon: 'shield',
    color: '#ff4757',
    url: '/pages/security/security',
    requiredPermission: 'security:menu',
    requiredRole: ['SECURITY_GUARD', 'SUPER_ADMIN']
  },
  
  // 紧急求助菜单
  emergency: {
    id: 'emergency',
    title: '紧急求助',
    description: '紧急呼叫、救援服务',
    icon: 'phone',
    color: '#ff4757',
    url: '/pages/emergency/emergency',
    requiredPermission: null,
    requiredRole: null
  },
  
  // 投诉建议菜单
  complaint: {
    id: 'complaint',
    title: '投诉建议',
    description: '在线投诉、意见反馈',
    icon: 'chat',
    color: '#2ed573',
    url: '/pages/complaint/complaint',
    requiredPermission: null,
    requiredRole: null
  },
  
  // 在线支付菜单
  payment: {
    id: 'payment',
    title: '在线支付',
    description: '物业缴费、账单管理',
    icon: 'credit-card',
    color: '#3742fa',
    url: '/pages/payment/payment',
    requiredPermission: null,
    requiredRole: null
  }
}

// 响应式数据
const authStore = useAuthStore()
const userStore = useUserStore()

// 计算可访问的菜单
const accessibleMenus = computed(() => {
  try {
    if (!authStore.isLoggedIn) {
      return []
    }
    
    return Object.values(menuConfig).filter(menu => {
      return canAccessMenu(menu)
    })
  } catch (error) {
    console.warn('计算可访问菜单失败:', error)
    return []
  }
})

// 检查菜单访问权限
const canAccessMenu = (menu) => {
  // 暂时允许所有用户访问所有菜单
  // TODO: 后续根据具体需求设置权限控制
  console.log('动态菜单: 暂时允许访问所有菜单', menu)
  return true
}

// 处理菜单点击
const handleMenuClick = (menu) => {
  if (menu.url) {
    uni.navigateTo({
      url: menu.url,
      fail: (err) => {
        console.error('页面跳转失败:', err)
        uni.showToast({
          title: '页面跳转失败',
          icon: 'none'
        })
      }
    })
  }
}

// 组件挂载时初始化
onMounted(() => {
  console.log('动态菜单组件初始化完成，可访问菜单数量:', accessibleMenus.value.length)
})
</script>

<style lang="scss" scoped>
.dynamic-menu {
  padding: 16px;
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 16px;
  margin-bottom: 12px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  
  &:active {
    transform: scale(0.98);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  }
  
  .menu-icon {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
  }
  
  .menu-info {
    flex: 1;
    
    .menu-title {
      display: block;
      font-size: 16px;
      font-weight: 600;
      color: #333;
      margin-bottom: 4px;
    }
    
    .menu-desc {
      display: block;
      font-size: 14px;
      color: #666;
    }
  }
}
</style>
